<template>
  <div>
    <el-row :gutter="8">
      <el-col :span="24">
        <el-card>
          <el-form inline>
            <el-form-item label="查询时间">
              <el-date-picker
                v-model="dateStr"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card header="三次监测数据">
          <scEcharts height="400px" :option="logsChartOption1"></scEcharts>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import scEcharts from "@/components/scEcharts";
import { listScjcsj } from "@/api/yqhs/scjcsj";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { computed } from "vue";
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
const { id } = toRefs(props);
const dateStr = ref(dayjs(new Date()).format("YYYY-MM-DD"));

const chartData = ref({
  categoryData: [],
  jqkyl: [],
  ssll: [],
  bccll: [],
});
const handleQuery = () => {
  listScjcsj({ jyzId: id.value, shijian: dateStr.value }).then((res) => {
    if (res && res.rows) {
      let categoryData = [];
      let jqkyl = [];
      let ssll = [];
      let bccll = [];
      for (let row of res.rows) {
        categoryData.push(row.shijian);
        jqkyl.push(Number(row.jqkyl));
        ssll.push(Number(row.ssll));
        bccll.push(Number(row.bccll));
      }
      chartData.value.categoryData = categoryData;
      chartData.value.jqkyl = jqkyl;
      chartData.value.ssll = ssll;
      chartData.value.bccll = bccll;
    } else {
      ElMessage.warning("暂无数据");
    }
    console.log(chartData.value);
  });
};

const logsChartOption1 = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      top: "5%",
      left: "right",
    },
    dataZoom: [
      {
        type: "inside",
      },
      {
        type: "slider",
      },
    ],
    xAxis: {
      data: chartData.value.categoryData,
      silent: false,
      splitLine: {
        show: false,
      },
      splitArea: {
        show: false,
      },
    },
    yAxis: {
      splitArea: {
        show: false,
      },
    },
    series: [
      {
        name: "进气口压力",
        type: "line",
        data: chartData.value.jqkyl,
        large: true,
      },
      {
        name: "瞬时流量",

        type: "line",
        data: chartData.value.ssll,
        large: true,
      },
      {
        name: "本次处理量",
        type: "line",
        data: chartData.value.bccll,
        large: true,
      },
    ],
  };
});

onMounted(() => {
  handleQuery();
});
</script>
<style scoped></style>
